<template>
  <div class="departments-container">
    <el-card class="box-card">
      <!-- 顶部 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first" />
        <!-- 头部 -->
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col
            :span="6"
            class="compents"
          ><i class="el-icon-office-building" />
            深圳国际程序员培训有限责任公司
          </el-col>
          <el-col :span="4" class="right-col">
            <span class="leader">负责人</span>
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    type="text"
                    @click="showDialog('')"
                  >添加子部门</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider />
        <!-- 底部 -->
        <el-tree
          v-slot:default="{ data }"
          v-loading="loading"
          :data="departs"
          accordion
        >
          <el-row
            type="flex"
            class="row-bg"
            justify="space-between"
            style="width:100%;"
          >
            <el-col :span="6" class="compents">
              {{ data.name }}
            </el-col>
            <el-col :span="4" class="right-col">
              <span class="leader">{{ data.manager }}</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item><el-button
                    type="text"
                    @click="showDialog(data.id)"
                  >添加子部门</el-button></el-dropdown-item>
                  <el-dropdown-item><el-button
                    type="text"
                    @click="enterEdit(data.id)"
                  >查看部门</el-button></el-dropdown-item>
                  <el-dropdown-item><el-button
                    type="text"
                    @click="delDpm(data.id)"
                  >删除部门</el-button></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-tree>
      </el-tabs>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="closeDig"
    >
      <el-form ref="depForm" :model="form" :rules="rules">
        <el-form-item
          prop="name"
          label="部门名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          prop="code"
          label="部门编码"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.code" autocomplete="off" />
        </el-form-item>
        <el-form-item
          prop="manager"
          label="部门负责人"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.manager"
            placeholder="请选择"
            @focus="getManager"
          >
            <el-option
              v-for="item in managerList"
              :key="item.id"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="introduce"
          label="部门介绍"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import {
  getDepartments,
  addDepartments,
  getDepartmentById,
  editDepartment,
  delDepartmentById
} from '../../api/departments'
// 导用户信息接口
import { getEmployeeSimple } from '../../api/employees'
// 导入弹窗
import { MessageBox } from 'element-ui'
export default {
  name: 'Departments',
  data() {
    return {
      // 是否显示loading
      loading: false,
      // 是否显示弹窗
      dialogFormVisible: false,
      // 表单数据
      form: {
        code: '', // 编码
        introduce: '', // 介绍
        manager: '', // 管理员
        name: '', // 名字
        pid: '' // 父节点id
      },
      // 左侧宽度
      formLabelWidth: '120px',
      activeName: 'first',
      // 本地默认数据
      departs: [
        {
          name: '总裁',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        {
          name: '行政',
          manager: '刘备',
          children: [{ name: '小组长', manager: '赵云' }]
        },
        { name: '人事', manager: '孙权' }
      ],
      managerList: [],
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '字符必须在1-50内', trigger: 'blur' },
          {
            validator: async(rule, value, callback) => {
              // 自定义校验规则
              // 获取数据
              const res = await getDepartments()
              const checkRes = res.depts.some(v => {
                if (this.form.id) {
                  // 编辑id不相等，但是value相等
                  if (value === v.name && this.form.id !== v.id) {
                    return true
                  }
                } else {
                  // 新增
                  if (value === v.name) {
                    // 存在
                    return true
                  }
                }
              })
              checkRes === true
                ? callback(new Error('部门名称不能重复'))
                : callback()
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '字符必须在1-50内', trigger: 'blur' },
          {
            validator: async(rule, value, callback) => {
              // 自定义校验规则
              // 获取数据
              const res = await getDepartments()
              const checkRes = res.depts.some(v => {
                if (this.form.id) {
                  // 编辑id不相等，但是value相等
                  if (value === v.code && this.form.id !== v.id) {
                    return true
                  }
                } else {
                  // 新增
                  if (value === v.code) {
                    // 存在
                    return true
                  }
                }
              })
              checkRes === true
                ? callback(new Error('部门编码不能重复'))
                : callback()
              // 初始判断规则
              // // some 方法
              // !res.depts.some(v => value === v.code)
              //   ? callback()
              //   : callback(new Error('有重复编码，请重新输入'))
              // filter 方法
              // res.depts.filter(v => value === v.code).length === 0
              //   ? callback()
              //   : callback(new Error('有重复编码，请重新输入'))
              // const filterRes = res.depts.filter(v => {
              //   if (value === v.code) {
              //     return true
              //   } else {
              //     return false
              //   }
              // })
              // if (filterRes.length === 0) {
              //   //  不重复
              //   callback()
              // } else {
              //   callback(new Error('有重复编码，请重新输入'))
              // }
            },
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '字符必须在1-300内', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.form.id ? '编辑部门' : '新增部门'
    }
  },
  async created() {
    this.getData()
  },
  /* eslint-disable */
  methods: {
    // 关闭弹窗的bug
    closeDig() {
      if (this.form.id) {
        // 有id表示是编辑框口
        this.form = {
          code: '', // 编码
          introduce: '', // 介绍
          manager: '', // 管理员
          name: '', // 名字
          pid: '' // 父节点id
        }
        this.$nextTick(() => {
          this.$refs.depForm.clearValidate()
        })
      } else {
        //
      }
    },
    // 删除部门信息
    delDpm(id) {
      // 提示用户是否删除
      MessageBox({
        title: '提示',
        message: '确定删除吗？',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          // 调用接口

          const res = await delDepartmentById(id)
          this.$message.success('删除成功')
          // 刷新数据
          this.getData()
        })
        .catch(() => {
          this.$message.error('删除失败')
        })
      // console.log(res)
    },
    // 进入编辑
    async enterEdit(id) {
      const res = await getDepartmentById(id)
      // console.log(res)
      // 赋值给form
      this.form = res
      // 显示弹窗渲染数据
      this.dialogFormVisible = true
    },
    // 封装获取数据
    // 利用递归封装
    async getData() {
      // 开启loading
      this.loading = true
      const res = await getDepartments()

      function formatData(list, pid) {
        return list.filter(v => {
          if (v.pid === pid) {
            v.children = formatData(list, v.id)
            return true
          } else {
            return false
          }
        })
      }
      // 替换数据
      this.departs = formatData(res.depts, '')
      // 关闭loading
      this.loading = false
      // console.log(res)
      // 筛选出pid为‘ ’的顶级节点
      // const rootTree = res.depts.filter(v => {
      //   if (v.pid === '') {
      //     return true
      //   } else {
      //     return false
      //   }
      // })
      // // 筛选出 childer子节点
      // rootTree.forEach(rV => {
      //   const children = res.depts.filter(v => {
      //     if (v.pid === rV.id) {
      //       return true
      //     } else {
      //       return false
      //     }
      //   })
      //   rV.children = children
      // })
      // // 替换数据
      // this.departs = rootTree
    },
    // 显示新增框
    showDialog(pid) {
      this.dialogFormVisible = true
      this.form.pid = pid
    },
    // 点击取消 表单重置
    cancel() {
      this.dialogFormVisible = false
      this.$refs.depForm.resetFields()
    },
    // 提交表单
    submitForm() {
      this.$refs.depForm.validate(async valid => {
        if (valid) {
          // 校验成功 提交数据
          // 判断是编辑框还是新增框
          if (this.form.id) {
            // 有id表示是编辑框，点击确定应该调用保存数据接口
            const editData = await editDepartment(this.form)
            // 提示用户，修改成功
            this.$message.success('修改成功')
          } else {
            const res = await addDepartments(this.form)
            // 提示用户，新增成功
            this.$message.success('新增成功')
          }
          // 关闭弹窗
          this.dialogFormVisible = false
          // 刷新数据
          this.getData()
          this.$refs.depForm.resetFields()
          // 因为修改了原先form的值，所以重置按钮可能不起作用，直接赋值，把表单清空
          this.form = {
            code: '', // 编码
            introduce: '', // 介绍
            manager: '', // 管理员
            name: '', // 名字
            pid: '' // 父节点id
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取管理员信息
    async getManager() {
      const res = await getEmployeeSimple()
      // console.log(res)
      this.managerList = res
    }
  }
}
</script>

<style lang="scss" scoped>
.departments-container {
  padding: 20px;
  background-color: #f0f2f5;
  .el-tabs__content {
    padding: 20px 90px;
    font-size: 14px;
    .compents {
      padding-left: 20px !important;
      font-size: 15px;
      font-weight: 700;
    }
    .right-col {
      span {
        font-size: 14px;
        vertical-align: bottom;
      }
    }
    .el-tree {
      .compents {
        padding-left: 20px !important;
        font-size: 15px;
        font-weight: 700;
      }
      .right-col {
        span {
          font-size: 14px;
          vertical-align: bottom;
        }
      }
    }
    .leader {
      margin-right: 15px;
    }
  }
  .el-divider {
    margin-top: 10px;
  }
  .right-col {
    text-align: right;
  }
}
</style>
